layui.use(['jquery', 'element'], function() {
    var $ = layui.jquery,
        element = layui.element;

    (function() {
        element.tab({
            headerElem: '.nav>li', //指定tab头元素项

            bodyElem: '.header-down>.subnav' //指定tab主体元素项
        });
    })();
    // 主题内容高度适应
    $(window).resize(function(e) {
        // console.log($(document).height());
        $(".main").height($(window).height() - $(".header").height() - $(".footer").height() - 10);
    }).resize();

    var myNavReq;

    $.getJSON({
        url: "json/nav.json",
        async: false, //同步请求
        success: callback
    });

    function callback(data) {
        console.log(data);
        myNavReq = data;
    }
    console.log(myNavReq);
    var tabs = [];
    var tabContents = [];
    var subnav = '';
    myNavReq.data.forEach(function(item) {
        tabs.push('<li lay-id=' + item.id + '><a href="javascript:;">' + item.title + '</a></li>');

        item.children.forEach(function(child) {
            subnav += '<li><a href="' + child.href + '" target="main"><i class="layui-icon">' + child.icon + '</i> ' + child.tit + '</a></li>';
        });
        tabContents.push('<div class="subnav"><ul class="menu ">' + subnav + '</ul></div>');
        subnav = '';
    });

    // console.log(tabContents[0]);

    // 给顶部导航选中状态
    $('.header-top .nav').html(tabs.join(''));
    $('.header-top .nav>li:eq(1)').addClass('layui-this');

    // 二级导航
    $('.header-down').html(tabContents.join('') + '<i class="up layui-icon">&#xe619;</i>');
    $('.header-down div:eq(1)').addClass('layui-show');

    // 二级导航隐藏与显现
    $('.up').on('click', function() {
        $(this).parent().slideUp("fast");
    });
    $('.nav').on('click', function() {
        $('.header-down').slideDown("fast");
    });



});